<template>
	<view class="my-export">
		<view class="radio-type">
			<radio-group class="radio-group" @change="radioChange">
				<label class="label-item" v-for="(item, index) in items" :key="item.value">
					<radio :value="item.value" :checked="index === current" />
					<text>{{item.name}}</text>
				</label>
			</radio-group>
		</view>
		<view class="bottom">
			<view class="sites" v-for="(item, index) in sites">
				<image :src=" '/static/images/index/so-the-search/' + item.img + '.png' " mode=""></image>
				<text>{{ item.text }}</text>
				<text>{{ item.version }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		//我的导出
		name: "myExport",
		data() {
			return {
				//单选框的 数组
				items: [
					{
						value: '0',
						name: '全部'
					},{
						value: '1',
						name: '仅手机',
						checked: 'true'
					},{
						value: '2',
						name: '仅固话'
					}
				],
				current: 0,  //当前选中的 单选框
				sites: [
					{
						id: 1,
						img: 'baidu-map',
						text: '百度地图',
						version: '1.0.2'
					},{
						id: 2,
						img: 'gaode-map',
						text: '高德地图',
						version: '1.0.2'
					},{
						id: 3,
						img: 'tengxun-map',
						text: '腾讯地图',
						version: '1.0.2'
					},{
						id: 3,
						img: 'huicong',
						text: '慧聪网',
						version: '1.0.2'
					},{
						id: 3,
						img: 'china-gong',
						text: '中国供应商',
						version: '1.0.2'
					},{
						id: 3,
						img: 'enterprise-yellow',
						text: '企业黄页',
						version: '1.0.2'
					},{
						id: 3,
						img: 'alibb',
						text: '阿里巴巴',
						version: '1.0.2'
					},{
						id: 3,
						img: 'listweb',
						text: '列表网',
						version: '1.0.2'
					},{
						id: 3,
						img: 'Information-network',
						text: '行业信息网',
						version: '1.0.2'
					},{
						id: 3,
						img: 'dianping',
						text: '大众点评',
						version: '1.0.2'
					},{
						id: 3,
						img: 'yiwugou',
						text: '义乌购',
						version: '1.0.2'
					},{
						id: 3,
						img: 'yishang',
						text: '亿商网',
						version: '1.0.2'
					},
				]
			}
		},
		onload(data) {
			console.log(data)
		},
		methods: {
			radioChange(evt) {
				console.log(evt)
				// for (let i = 0; i < this.items.length; i++) {
				// 	if (this.items[i].value === evt.target.value) {
				// 		this.current = i;
				// 		break;
				// 	}
				// }
			},
		}
	}
</script>

<style lang="less" scoped>
	.flex{
		display: flex;
	}
	.my-export{
		.radio-type{
			padding: 33rpx;
			background: #EEEEEE;
			.radio-group{
				.flex;
				.label-item{
					margin-right: 30rpx;
					.uni-radio-input{
						width: 44rpx;
						height: 44rpx;
					}
					text{
						font-size: 34rpx;
					}
				}
			}
		}
		.bottom{
			.flex;
			text-align: center;
			align-items: center;
			flex-wrap: wrap;
			
			.sites{
				width: 25%;
				padding: 60rpx 0;
				background: #fff;
				image{
					width: 104rpx;
					height: 104rpx;
					margin: auto;
					display: block;
				}
				text{
					margin-top: 15rpx;
					display: block;
				}
			}
		}
	}
</style>
